/*
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2022-06-08 16:44:28
 * @LastEditors: voanit
 * @LastEditTime: 2022-06-09 12:36:43
 */
import { useHistory } from 'react-router-dom'
import { NavBar } from 'antd-mobile'

import styles from './index.module.scss'
import { query } from '@/utils'
import { useEffect } from 'react'
import { getSearchResult } from '@/store/actions/search'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '@/types/store'
import ArticleItem from '@/pages/Home/components/ArticleItem/ArticleItem'
const Result = () => {
  const history = useHistory()
  const dispatch = useDispatch()
  // const key = new URLSearchParams(window.location.search).get('key')
  // const age = new URLSearchParams(window.location.search).get('age')
  // // 获取通过 URL 地址传入的查询字符串参数
  // // const params = new URLSearchParams(window.location.search)
  // // const key = params.get('key')
  // console.log(key, age, 22);

  // key=1&age=18=>{key:1,age:18} 
  // window.location.search=>?key=1&age=18

  // const query = (url: string) => {
  //   url = url.slice(1) // key=1&age=18
  //   const arr = url.split('&') //[key=1,age=18]
  //   let obj: { [key: string]: any } = {}
  //   for (const item of arr) { //item=>key=1  age=18
  //     let itemArr = item.split('=') //[key,1]  [age,18]
  //     obj[itemArr[0]] = itemArr[1] //{key:1,age:18}
  //   }
  //   return obj
  // }
  // console.log(query(window.location.search), 77);
  let { key } = query(window.location.search)
  const { results } = useSelector((state: RootState) => state.search.results)

  useEffect(() => {
    dispatch(getSearchResult(key))
  }, [key])


  return (
    <div className={styles.root}>
      <NavBar onBack={() => history.go(-1)}>搜索结果</NavBar>
      <div className="article-list">
        {results.map((item) => (
          <ArticleItem
            key={item.art_id}
            article={item}
          ></ArticleItem>
        ))}
      </div>
    </div>
  )
}

export default Result